body {
  margin: 0 auto;
  display: flex;
  background: #202020;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  font-family: Helvetica;
  color: #ffffff;
}

.container {
  font-family: Helvetica;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  background: #202020;
}

.comments,
.comment {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment,
.add-form {
  width: 596px;
  box-sizing: border-box;
  background: radial-gradient(
    75.42% 75.42% at 50% 42.37%,
    rgba(53, 53, 53, 0) 22.92%,
    #7334ea 100%
  );
  filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
  border-radius: 20px;
}
.login-form {
  box-sizing: border-box;
  background: radial-gradient(
    75.42% 75.42% at 50% 42.37%,
    rgba(53, 53, 53, 0) 22.92%,
    #7334ea 100%
  );
  filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
  border-radius: 20px;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comment {
  padding: 48px;
}

.comment-header {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
}

.comment-body {
  margin-top: 32px;
  margin-bottom: 32px;
}

.comment-text {
  font-size: 32px;
}

.likes {
  display: flex;
  align-items: center;
}

.like-button {
  all: unset;
  cursor: pointer;
}

.likes-counter {
  font-size: 26px;
  margin-right: 8px;
}

.like-button {
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
}

.-active-like {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E");
}

.add-form {
  padding: 20px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
}

.login-form {
  padding: 20px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
}

.add-form-name,
.add-form-text {
  font-size: 16px;
  font-family: Helvetica;
  border-radius: 8px;
  border: none;
}

.add-form-name {
  width: 300px;
  padding: 11px 22px;
}

.add-form-text {
  margin-top: 12px;
  padding: 22px;
  resize: none;
}

.add-form-row {
  display: flex;
  justify-content: flex-end;
}

.add-form-button {
  margin-top: 24px;
  font-size: 24px;
  padding: 10px 20px;
  background-color: #bcec30;
  border: none;
  border-radius: 18px;
  cursor: pointer;
}

.add-form-button:hover {
  opacity: 0.9;
}

.delete-form-button {
  margin-top: 24px;
  font-size: 24px;
  padding: 10px 20px;
  background-color: rgb(247, 149, 149);
  border: none;
  border-radius: 18px;
  cursor: pointer;
}

.delete-form-button:hover {
  opacity: 0.9;
}

.error-form {
  background-color: rgb(255, 209, 213);
}

.page-loader {
  display: block;
  font-family: Helvetica;
  color: #ffffff;
  width: fit-content;
  margin-top: 40px;
}

.comment-loader {
  display: none;
  margin-top: 45px;
}

.mrgn-tp-20 {
  margin-top: 20px;
}

.mrgn-btm-20 {
  margin-bottom: 20px;
}

.width-100 {
  width: 100%;
}
